var SupplierForm = function () {
  var template = /*html*/ `
    <div class="supplier-form" v-loading="loading">
      <el-form v-model="supplier" ref="supplierFormRef" class="supplierForm" label-width="100px">
        <el-form-item label="供应商名称" prop="supplierName">
          <el-input v-model="supplier.supplierName" class="form-input"></el-input>
          <el-button type="primary" @click="addSupplier" v-if="type==='update'">添加供应商</el-button>
        </el-form-item>
        <el-form-item label="联系人" prop="contactUser">
          <el-input v-model="supplier.contactUser" class="form-input"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="contactPhone">
          <el-input v-model="supplier.contactPhone" class="form-input"></el-input>
        </el-form-item>

        <template v-if="type==='update'">
        <el-form-item label="创建人">
          <span>{{supplier.createUser}}</span>
        </el-form-item>
        <el-form-item label="创建时间">
          <span v-if="!SysUtil.isEmpty(supplier.createTime)">{{moment(supplier.createTime).format('YYYY-MM-DD')}}</span>
        </el-form-item>
        <el-form-item label="修改人">
          <span>{{supplier.updateUser}}</span>
        </el-form-item>
        <el-form-item label="修改时间">
          <span v-if="!SysUtil.isEmpty(supplier.updateTime)">{{moment(supplier.updateTime).format('YYYY-MM-DD')}}</span>
        </el-form-item>
        <el-form-item label="状态" prop="status" class="form-input">
          <el-select v-model="supplier.status">
            <el-option v-for="state in statusList" :key="'status_'+state.value" :value="state.value" :label="state.label"></el-option>
          </el-select>
        </el-form-item>
        </template>
      </el-form>

      <div v-if="type==='create'" style="text-align:center;margin-bottom:20px;">
        <el-button type="primary" @click="ensure">确定</el-button>
      </div>

      <div v-if="supplier.id!==''&&type==='update'" style="text-align:center;margin-bottom:20px;">
        <el-button type="primary" @click="ensure">修改</el-button>
      </div>
    </div>
  `;

  return {
    props: {
      supplier: {
        type: Object,
        default: function () {
          return {};
        }
      },
      type: {
        type: String,
        default: 'create'
      }
    },
    data: function () {
      return {
        loading: false,
        moment: moment,
        SysUtil: SysUtil,
        statusList: [{
          value: 1,
          label: '使用'
        }, {
          value: 2,
          label: '禁用'
        }]
      };
    },
    methods: {
      addSupplier: function () {
        this.$emit('add-supplier');
      },

      ensure: function () {
        var supplier = this.supplier;
        if (!this.checkValidate(supplier)) {
          return;
        }

        var type = this.type;
        if (type === 'create') {
          this.saveSupplier();
        } else if (type === 'update') {
          this.updateSupplier();
        }
      },

      saveSupplier: function () {
        var supplier = this.supplier;
        supplier = _.cloneDeep(supplier);
        delete supplier.id;
        delete supplier.status;

        var self = this;
        this.loading = true;
        ajaxRequest('putOutNew/addPutoutSupplier', supplier).then(function () {
          self.loading = false;
          self.$alert('添加外协供应商成功', '信息');
          self.$emit('save-success');
        }).catch(function () {
          self.loading = false;
        });
      },

      updateSupplier: function () {
        var supplier = this.supplier;
        supplier = _.cloneDeep(supplier);

        var self = this;
        this.loading = true;
        ajaxRequest('putOutNew/updatePutoutSupplier', supplier).then(function () {
          self.loading = false;
          self.$alert('修改外协供应商成功', '信息');
          self.$emit('save-success');
        }).catch(function () {
          self.loading = false;
        });
      },

      checkValidate: function (supplier) {
        var checkFields = ['supplierName', 'contactUser', 'contactPhone'];
        if (!CheckVaildUtil.checkNullValue(checkFields, supplier, this.getErrorMsg)) {
          return false;
        }

        var contactPhone = supplier.contactPhone;
        var phoneReg = /^[\d-]+$/;
        if (!phoneReg.test(contactPhone)) {
          this.$alert(this.getErrorMsg('phoneNotValidate'), '提示');
          return true;
        }
        //        var cellPhoneReg = /^1[3|4|5|8][0-9]\d{4,8}$/;
        //        var telePhoneReg = /^(0\d{2}-\d{8}(-\d{1,4})?)|(0\d{3}-\d{7,8}(-\d{1,4})?)$/
        //        if (!cellPhoneReg.test(contactPhone) && !telePhoneReg.test(contactPhone)) {
        //          this.$alert(this.getErrorMsg('phoneNotValidate'), '提示');
        //          return false;
        //        }
        return true;
      },

      getErrorMsg: function (code) {
        var errorObj = {
          supplierName: '请输入供应商名称',
          contactUser: '请输入联系人',
          contactPhone: '请输入联系电话',
          phoneNotValidate: '请输入正确的联系电话'
        };
        return errorObj[code];
      }
    },
    template: template
  };
}();